
@import '../../../utils/utils.less';
@import '../../../style/index.less';

.swatch{
  width: 64px;
  height: 32px;
  padding: 5px;
  background: #fff;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
  display: inline-block;
  box-sizing:border-box;
  cursor: pointer;
  & .color1{
    width: 27px;
    height: 22px;
    //background: #FF476C;
    display:inline-block;
  }  
  & .color2{
    width: 27px;
    height: 22px;
    //background: #FFB3C2;
    display:inline-block;
  }
  & .color3{
    width: 27px;
    height: 22px;
   // background: #C3A769;
    display:inline-block;
  }
  & .color4{
    width: 27px;
    height: 22px;
    //background: #F3EEE1;
    display:inline-block;
  }
  & .color5{
    width: 27px;
    height: 22px;
    //background: #02B8B1;
    display:inline-block;
  }
  & .color6{
    width: 27px;
    height: 22px;
    //background: #B2E9E7;
    display:inline-block;
  }
  & .color7{
    width: 27px;
    height: 22px;
    //background: #FCC600;
    display:inline-block;
  }
  & .color8{
    width: 27px;
    height: 22px;
   // background: #212121;
    display:inline-block;
  }
  & .color9{
    width: 27px;
    height: 22px;
   // background: #FF3131;
    display:inline-block;
  }
  & .color10{
    width: 27px;
    height: 22px;
   // background: #FF9800;
    display:inline-block;
  }  
}
.subColorPicker{
  transform: translate(104%,-100%);
}
.header{
  position: relative;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
}
.active{
  //border-color:@primary;
  padding: 4px !important;
  border:1px solid @primary;
}
// .color{
//   width: 36px;
//   height: 14px;
//   border-radius: 2px;  
// }
// .cover {
//   position: fixed;
//   top: 0px;
//   right: 0px;
//   bottom: 0px;
//   left: 0px;
// }
.pay{
  :global{
    .zent-btn{
      font-size: 14px !important;
    }
  }
}